<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0" />
    <title>cityList</title>
    <link rel="stylesheet" type="text/css" href="../css/api.css" />
    <link rel="stylesheet" type="text/css" href="../css/aui.css" />

    <style>
        header {
            background-color: #F0AD4E;
            border-bottom: solid #dddfe3 1px;
        }

        h1 {
            height: 50px;
            line-height: 50px;
            color: white;
            font-size: 20px;
            text-align: center;
        }

        .back {
            position: absolute;
            left: 0px;
            bottom: 0px;
            width: 50px;
            height: 50px;
            background: url(../image/header/back.png) center center no-repeat;
            background-size: 15px auto;
        }
    </style>
</head>

<body>
    <header>
        <div class="back" tapmode onclick="api.closeWin();"></div>
        <h1>城市列表</h1>
    </header>
</body>
<script type="text/javascript" src="../script/api.js"></script>
<script type="text/javascript">
    apiready = function() {
        api.showProgress({
            style: 'default',
            animationType: 'fade',
            title: '定位中...',
            modal: false
        });

        var header = $api.dom('header');
        //$api.fixStatusBar(header);
        $api.fixIos7Bar(header);


        var headerH = $api.offset(header).h;

        var currentCity = '北京';
        var cityList = api.require('cityList');



        cityList.open({
                x: 0,
                w: api.winWidth,
                y: headerH,
                h: api.winHeight - headerH,
                resource: 'widget://res/cityList.json',
                fixedOn: api.frameName,
                style: {
                    indector: {
                        bgColor: '#fff',
                        color: '#888'
                    },
                    titleColor: '#888',
                    titleSize: 16,
                    contentColor: '#888',
                    contentSize: 14,
                    localColor: '#888',
                    localSize: 14,
                    searchBar: {
                        bg: '#fcfcfc',
                        cancelColor: '#000'
                    }
                }
            },
            function(ret, err) {
                if (ret.eventType == 'click') {

                    //alert(JSON.stringify(ret));
                    var userInfo = $api.getStorage('userInfo') || {};
                    userInfo.region = ret.cityInfo.city;
                    userInfo.citycode = ret.cityInfo.citycode;

                    $api.setStorage('userInfo', userInfo);

                    getBannerLst($api.getStorage('userInfo').citycode);

                    api.sendEvent({
                        name: 'city_selected'
                    });
                    api.closeWin();

                }
            });


    };

    function getBannerLst(code) {
        api.ajax({
            url: 'http://192.168.1.100/banner_lst/' + code,
            method: 'post',
            dataType: 'JSON',
            data: {
                values: {
                    token: 'haha'
                }
            }
        }, function(ret, err) {
            if (ret) {
                //alert( JSON.stringify( ret ) );
                banners = ret;
                $api.setStorage('banners', banners);

                arrayPath = new Array();

                for (var i = 0; i < banners['data'].length; i++) {
                    //alert(banners['data'][i]['pic']);
                    arrayPath[i] = 'http://192.168.1.100' + banners['data'][i]['pic'];

                }

                var jsfun = 'reloadScroll();';
                api.execScript({
                    name: 'main',
                    frameName: 'home',
                    script: jsfun
                });

            } else {
                //alert(JSON.stringify(err));
            }
        });
    }

</script>

</html>
